<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />

		<style>
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
		</style>

	</head>

	<body>

		<!--
			作者：460575807@qq.com
			时间：2017-07-12
			描述：grid（栅格系统）使用时只需在外围容器上添加.mui-row
			超小屏幕(<400px)(Extrasmall) ——> .mui-col-xs-[1-12]
			小屏幕(≥400px) Small ——> .mui-col-sm-[1-12]	
			12列响应式栅格系统(和为12)
		-->
		<div class="mui-content mui-row mui-fullscreen">
			<div class="mui-col-xs-3">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;background: #FFFFFF;">
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()

			var data_leftTabText = ['热门推荐', '超市', '国际品牌', '奢侈品', '全球购', '男装', '女装', '箱包手袋',
				'美妆个护', '手机数码', '电脑办公', '家用电器'
			];
			var data_img = ['http://joymepic.joyme.com/article/uploads/allimg/201705/1496213407718425.jpg?watermark/1/image/aHR0cDovL2pveW1lcGljLmpveW1lLmNvbS9hcnRpY2xlL3VwbG9hZHMvMTYwODE5LzgwLTE2MFE5MUZaMzQzOC5wbmc=/dissolve/70/gravity/SouthEast/ws/0.13', 'http://img3.imgtn.bdimg.com/it/u=158918749,3472802168&fm=26&gp=0.jpg', 'http://img3.imgtn.bdimg.com/it/u=3700156084,1255615173&fm=200&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=2248545359,2308549919&fm=26&gp=0.jpg', 'http://img3.imgtn.bdimg.com/it/u=1483269277,2044126382&fm=26&gp=0.jpg', 'http://img1.imgtn.bdimg.com/it/u=2875653198,2481124055&fm=26&gp=0.jpg', 'http://img4.imgtn.bdimg.com/it/u=3895375222,4144765486&fm=26&gp=0.jpg', 'http://img3.imgtn.bdimg.com/it/u=3253321028,3425630891&fm=200&gp=0.jpg', 'http://img5.imgtn.bdimg.com/it/u=1731298324,1923870667&fm=200&gp=0.jpg', 'http://img4.imgtn.bdimg.com/it/u=3583385316,60485224&fm=26&gp=0.jpg', 'http://img3.imgtn.bdimg.com/it/u=2590744298,2806565801&fm=200&gp=0.jpg', 'http://img2.imgtn.bdimg.com/it/u=2564092562,97135812&fm=26&gp=0.jpg'];

			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			var html_left = [];
			var i = 1;
			for(i = 0; i <= data_leftTabText.length - 1; i++) {
				//div锚点
				html_left.push('<a class="mui-control-item" href="#content' + i + '">' + data_leftTabText[i] + '</a>');
			}
			controls.innerHTML = html_left.join('');

			var html_right = [];
			for(i = 0; i < data_leftTabText.length; i++) {
				//一个左边tab对应一个div锚点板块
				html_right.push('<div id="content' + i + '" class="mui-control-content"> ');
				html_right.push('<div class="mui-card"><img id="img_top" height="150px" src=' + data_img[i] + '/></div>');
				html_right.push(' </div>');
			}
			contents.innerHTML = html_right.join('');
			//默认选中第一个
			controls.querySelector('.mui-control-item').classList.add('mui-active');
			contents.querySelector('.mui-control-content').classList.add('mui-active');
		</script>
	</body>

</html>